<template>
  <div class="container">
    <div class="header">
      <span class="title">
        {{this.room.roomName}}
      </span>
      <el-button type="primary" class="qiandao el-icon-upload el-icon--right" @click="sigin_judge()">{{this.sigin_display}}</el-button>
    </div>
    <div id="room-video" class="video-room">
  <video-player  class="video-player vjs-custom-skin "
                 ref="videoPlayer"
                 :playsinline="true"
                 :options="playerOptions"
                 @play="onPlayerPlay($event)"
                 @pause="onPlayerPause($event)">
  </video-player>
    </div>
  <div class="xiao">
    <div  class = "tabs">
      <el-tabs v-model = "activeName" stretch="true" @tab-click = "handleClick(activeName)" type="card">
        <el-tab-pane label = "弹幕区" name = "comment" ></el-tab-pane>
        <el-tab-pane label = "历史签到信息" name = "roominfo" v-if="this.is_master"></el-tab-pane>
        <el-tab-pane label = "签到详情" name = "siginDetail" v-if="false"></el-tab-pane>
        <el-tab-pane label = "当前投票活动" name = "activity"></el-tab-pane>
        <el-tab-pane label = "历史投票信息" name = "voteList" v-if="this.is_master"></el-tab-pane>
        <el-tab-pane label = "投票详情" name = "roominfo" v-if="false"></el-tab-pane>
        <el-tab-pane label = "修改投票" name = "roominfo" v-if="false"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="duiying">
      <div class="danmu" v-show="showDanmu">
        <div class="danmulist"></div>
        <div class="neirong">
          <el-input v-model="input" placeholder="请输入内容" class="commit"></el-input>
          <el-button type="primary" icon="el-icon-edit" class="send">发送</el-button>
        </div>
      </div>
      <div class="meeting_room_info" v-show="showInfo">
        <!--往期签到记录-->
        <el-table
          :data="siginList"
          style="width: 100%">
          <el-table-column
            prop="siginDate"
            label="签到发起日期">
          </el-table-column>
          <el-table-column
            prop="State"
            label="签到状态">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.siginState==0">已结束</el-tag>
              <el-tag v-else>正在进行</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small"
                         @click="sigin_show(scope.row.siginId)">查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--签到详情-->
      <div class="meeting_room_info" v-show="siginDetailShow">
        <!--往期签到记录-->
        <el-table
          :data="siginUserList"
          style="width: 100%">
          <el-table-column
            prop="userName"
            label="签到人">
          </el-table-column>
        </el-table>
      </div>
      <div class="toupiao" v-show="showToupiao">
        <div class="wenti">议题1：</div>
        <el-radio v-model="radio" label="1">备选项</el-radio>
        <el-radio v-model="radio" label="2">备选项</el-radio>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  function format (time) {
    var d = new Date(time);
    var times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
    if (times == '1970-1-1 8:0:0')
      return ''
    return times;
  }
export default {
  name: 'meetingroom',
  data () {
    return {
      showToupiao: false,
      showDanmu: true,
      showInfo: false,
      siginDetailShow:false,
      activeName: 'comment',
      room:{
        roomName:'test'
      },
      sigin:{

      },
      sigin_display:'签到',
      is_master:false,
      siginList:[],
      siginUserList:[],
      playerOptions: {
        autoplay: false,
        muted: false,
        loop: false,
        preload: 'auto',
        language: 'zh-CN',
        live: true,
        aspectRatio: '16:9',
        fluid: true,
        sources: [{
          type: 'video/mp4',
          src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
        }],
        width: document.documentElement.clientWidth
      },
      radio: '1'
    }
  },
  mounted(){
    this.init();
  },
  methods: {
    handleClick (activeName) {
      if (activeName === 'comment') {
        this.showDanmu = true
        this.showToupiao = false
        this.showInfo = false
        this.siginDetailShow=false
      } else if (activeName === 'roominfo') {
        this.showDanmu = false
        this.showToupiao = false
        this.showInfo = true
        this.siginDetailShow=false
      } else {
        this.showDanmu = false
        this.showToupiao = true
        this.showInfo = false
        this.siginDetailShow=false
      }
    },
    //判断是不是房主
    master(){
      let roomId = this.$route.query.id;
      let list = JSON.parse(sessionStorage.getItem("roomIdList"));
      //如果是房主就不做判断
      for(let i in list){
        if(list[i]==roomId){
          this.is_master=true//房主标志为true
          if(this.sigin.siginId!=null){
            this.sigin_display='结束签到'
          }else{
            this.sigin_display='发起签到'
          }
          return;
        }
      }
      //判断不是房主的签到
      if(this.sigin.siginId!=null){//有签到
        //判断是否已经签到
        this.$axios.get('/api/sigin/haveSigin',{
          params:{
              siginId:this.sigin.siginId
          }
        }).then(res=>{
          if(res.data.sigin==true){//已经签到
            this.sigin_display='已签到'
          }else{
            this.sigin_display='签到'
          }
        })
      }else{
        this.sigin_display='暂无签到'
      }
    },
    //当前房间初始化
    init(){
        this.$axios.get('/api/room/getRoomInfo',{
          params:{
            roomId:this.$route.query.id
          }
        }).then(res=>{
          this.room=res.data.roomInfo//房间信息获取
          this.sigin=res.data.sigin;//签到信息获取
          //判断是不是房主,并且对签到信息初始化
          this.master();
          if(this.is_master==true){
              //初始化房主才能获取的信息
              this.sigin_history();//往期签到记录
          }else{//如果不是房主
            if(this.room.roomPassword!=''){//如果需要密码
              this.token_verify();//验证
            }
          }
        })
    },
    token_verify(){
      let token = '';
      if(sessionStorage.getItem("token")!=null)
      token = sessionStorage.getItem("token");
      let userId = ''
      if(sessionStorage.getItem("userId")!=null)
      userId=sessionStorage.getItem("userId");
      let roomId = this.$route.query.id;
      //token的判断，防止其他用户登录后直接url跳过密码验证
      this.$axios.get('/api/room/verify',{
        params:{
          token:token,
          userId:userId,
          roomId:roomId
        }
      }).then(res=>{
        if(res.data.code==0)
          this.$router.push('/index')
      })
    },
    //签到按钮判断
    sigin_judge(){
      let postData = this.$qs.stringify({
        roomId:this.room.roomId
      });
      //如果是房主
      if(this.is_master==true){//是房主，发起or结束
        if(this.sigin_display=='发起签到'){//发起签到
          this.$axios({
            method: 'post',
            url:'/api/sigin/createSigin',
            data: postData
          }).then(res=>{
            if(res.data.code==1){
              this.sigin_display='结束签到'
              this.sigin=res.data.sigin;
              this.sigin_history()
              this.$message({
                message: '发起签到成功！',
                type: 'success',
                duration:3000,
              })
            }
          })
        }else{//结束签到
          let endData=this.$qs.stringify({
            siginId:this.sigin.siginId
          });
          this.$axios({
            method: 'post',
            url:'/api/sigin/endSigin',
            data: endData
          }).then(res=>{
            if(res.data.code==1) {
              this.sigin_display = '发起签到'
              this.sigin={}
              this.sigin_history()
              this.$message({
                message: '结束签到成功！',
                type: 'success',
                duration:3000,
              })
            }
          })
        }
      }else{//不是房主，响应
        if(this.sigin_display=='签到'){//签到
            this.$axios.get('/api/sigin/sigin',{
              params:{
                siginId:this.sigin.siginId
              }
            }).then(res=>{
              if(res.data.code==1){
                this.$message({
                  message: '签到成功！',
                  type: 'success',
                  duration:3000,
                })
                this.sigin_display = '已签到'
              }
            })
        }else if(this.sigin_display=='已签到'){//已签到
          this.$message({
            message: '已签到！',
            type: 'success',
            duration:3000,
          })
        }else{//暂无签到
          this.$message({
            message: '暂无签到！',
            type: 'success',
            duration:3000,
          })
        }
      }
    },
    //往期签到显示
    sigin_history(){
      this.$axios.get('/api/sigin/getSiginOverView',{
        params:{
          roomId:this.room.roomId
        }
      }).then(res=>{
        if(res.data.code==1){
          this.siginList=res.data.siginList;
          for(let i in this.siginList){
            this.siginList[i].siginDate=format(this.siginList[i].siginDate);
          }
          console.log(this.siginList)
        }
      })
    },
    sigin_show(siginId){
        this.$axios.get('/api/sigin/getSiginUserList',{
          params:{
            siginId:siginId
          }
        }).then(res=>{
          this.siginUserList=res.data.userList
          this.showInfo = false
          this.siginDetailShow=true
        })
    }
  }
}
</script>
<style scoped>
  .header {
    display: flex;
    width: 100%;
    height: 1.5rem;
  }
  .title{
    float: left;
    margin-left: .1rem;
    margin-right: .1rem;
    width: 70%;
    margin: 0.3rem auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 0.9rem;
  }
  .qiandao{
    float: right;
    margin-left: .1rem;
    margin-right: .1rem;
    width: 25%;
    height: .3rem;
    text-align: center;
    line-height: 0;
    margin: auto;
  }
  .container{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .video-room{
    height: 4.8rem;
  }
  .meeting_room_info{
    height: 100%;
    text-align: center;
    margin: .1rem;
    padding: .1rem;
    }
  .xiao{
    height: 100%;
    position:relative;
  }
  .tabs{
    width: 100%;
    position:absolute;
    height:15%;
  }
  .inpputinfo{
    margin-bottom: 0.5rem;
  }
  .duiying{
    position:absolute;
    width: 100%;
    margin-top: 1.2rem;
    height: 85%;
  }
  .neirong{
    width: 100%;
    display: flex;
    padding: .1rem;
    padding-bottom: 0;
  }
  .commit{
    float: left;
    margin-left: .2rem;
    margin-right: .1rem;
  }
  .send{
    float: right;
  }
  .danmu{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: .1rem;
  }
  .info-div{
    width: 100%;
    display: flex;
    text-align: center;
    line-height: 1.4rem;
  }
  .info-label{
    float: left;
    width: 40%;
    margin-left: .1rem;
    margin-right: .1rem;
    text-align: center;
  }
  .inpputinfo{
    float: right;
    margin-left: .1rem;
    margin-right: .1rem;
  }
  .toupiao{
    height: 100%;
  }
</style>
